<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1" />
  <style>
    body {
      background: #333;
      color: #888;
      margin: 0px;

      display: flex;
      flex-direction: column;
      padding: 5px;
    }

    .view {
      position: relative;
      flex: 1;
    }

    .toolbar {
      display: flex;
      margin-top: 10px;

      font-size: 12px;
    }

    .toolbar>* {
      margin-right: 10px;
    }

    .toolbar>*:last-child {
      margin-right: 0px;
    }

    .fit {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    canvas {
      background: #09f;
    }

    canvas:focus {
      outline: 0;
    }

    .field {
      display: inline-block;
      margin-right: 5px;
    }

    .dgui {
      position: absolute;
      top: 5px;
      left: 5px;
    }
  </style>

  <script src="../../node_modules/vconsole/dist/vconsole.min.js"></script>
  <script src="../../node_modules/stats.js/build/stats.min.js"></script>
  <script src="../../node_modules/dat.gui/build/dat.gui.min.js"></script>
  <script src="../bin/dev/cc.js"></script>
  <script src="./common/camera.js"></script>
  <script src="./shell.js"></script>
</head>

<body class="fit">
  <div id="view" class="view"></div>
  <div class="toolbar">
    <div>
      <div class="field">
        <input type="checkbox" id="showFPS"></input>FPS
      </div>
      <div class="field">
        <input type="checkbox" id="spector"></input>Spector
      </div>
      <div class="field">
        <input type="checkbox" id="vconsole"></input>VConsole
      </div>
    </div>
    <span style="flex: 1"></span>
    <select id="exampleList">
      <option value="./src/simple.js">Simple</option>
      <option value="./src/collision-detection.js">Collision Detection</option>
      <option value="./src/gizmo.js">Gizmo</option>
      <option value="./src/planar-shadow.js">Planar Shadow</option>
      <option value="./src/save-primitive-objs.js">Save Primitive OBJs</option>
      <!-- <option value="./src/custom-effect.js">Custom Effect</option> -->
    </select>
  </div>
</body>

</html>
